<template>
  <view
    class="trade-info-container bg-theme"
    :class="{ darkStyle: theme == 'dark' }"
  >
    <view class="trade-info-head">
      <view class="logo-wrap">
        <image :src="join_path(currency.logo)" class="logo-image"></image>
      </view>
      <view class="trade-info-title">
        {{ currency.code }}
      </view>
    </view>
    <view class="trade-info-wrap">
      <view class="trade-info-item">
        <view class="trade-label">{{ $t("tradeInfo.labels[0]") }}</view>
        <view class="trade-value">{{ currency.total_issue }}</view>
      </view>
      <view class="trade-info-item">
        <view class="trade-label">{{ $t("tradeInfo.labels[1]") }}</view>
        <view class="trade-value">{{ currency.total_circulation }}</view>
      </view>
      <view class="trade-info-item">
        <view class="trade-label">{{ $t("tradeInfo.labels[2]") }}</view>
        <view class="trade-value">{{ currency.issue_price }}</view>
      </view>
      <view class="trade-info-item">
        <view class="trade-label">{{ $t("tradeInfo.labels[3]") }}</view>
        <view class="trade-value">{{ currency.issue_time }}</view>
      </view>
      <view class="trade-info-item">
        <view class="trade-label">{{ $t("tradeInfo.labels[4]") }}</view>
        <view class="trade-value">
          <span class="trade-url">
            {{ currency.white_paper_address }}
          </span>
          <span
            class="trade-copy copy-code"
            @click="copyContent(currency.white_paper_address)"
          >
            {{ $t("tradeInfo.labels[7]") }}
          </span>
        </view>
      </view>
      <view class="trade-info-item">
        <view class="trade-label">{{ $t("tradeInfo.labels[5]") }}</view>
        <view class="trade-value">
          <span class="trade-url">
            {{ currency.website_address }}
          </span>
          <span
            class="trade-copy copy-code"
            @click="copyContent(currency.website_address)"
          >
            {{ $t("tradeInfo.labels[7]") }}
          </span>
        </view>
      </view>
    </view>
    <view class="trade-info-content-wrap">
      <view class="trade-info-content-title">
        {{ $t("tradeInfo.labels[6]") }}
      </view>
      <view class="trade-info-content">
        {{ currency.new_desc }}
      </view>
    </view>
  </view>
</template>

<script>
import { join_image_src } from "@/utils/urllib.js";

export default {
  name: "TradeInfo",
  props: {
    currency: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {};
  },
  methods: {
    join_path(url) {
      return join_image_src(url);
    },
    copyContent(data) {
      this.$utils.copy(data).then(() => {
        this.$u.toast(this.$t("promotion.tips[0]"));
      });
    },
  },
};
</script>

<style lang="less" scoped>
@import "~@/assets/styles/mixins.less";

.trade-info-container {
  background-color: @white;
  padding: 30rpx;
  padding-bottom: 180rpx;
  .trade-info-head {
    display: flex;
    align-items: center;
    .logo-wrap {
      margin-right: 10rpx;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      width: 56rpx;
      height: 56rpx;
      border: 4rpx solid #bbbbbb;
      .logo-image {
        border-radius: 50%;
        width: 36rpx;
        height: 36rpx;
      }
    }
    .trade-info-title {
      font-size: 36rpx;
      font-weight: bold;
    }
  }

  .trade-info-wrap {
    margin-top: 30rpx;
    .trade-info-item {
      display: flex;
      align-items: center;
      flex-wrap: nowrap;
      justify-content: space-between;
      height: 80rpx;
      font-size: 24rpx;
      .trade-label {
        flex-shrink: 0;
        color: var(--text-color);
        margin-right: 30rpx;
      }

      .trade-value {
        color: var(--text-color-2);
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        justify-content: flex-end;
        .trade-url {
          display: inline-block;
          .ellipsis(1);
          padding-right: 14rpx;
        }
        .trade-copy {
          flex-shrink: 0;
          padding: 10rpx 30rpx;
          color: @brand-color;
          position: relative;
          &::after {
            content: " ";
            position: absolute;
            left: 0;
            width: 2rpx;
            height: 50%;
            top: 50%;
            transform: translateY(-50%);
            background-color: @border-color;
          }
        }
      }
    }
  }
  .trade-info-content-wrap {
    .trade-info-content-title {
      font-size: 36rpx;
      font-weight: bold;
    }
    .trade-info-content {
      margin-top: 20rpx;
      color: var(--text-color-2);
    }
  }
}
</style>
